<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海大优选</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/nav-footer.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>

        @font-face {
            font-family: 'cool';
            src:url('font/kanfu.TTF');

        }
        /*去除a标签的默认样式*/
        a {
            color: black;
            text-decoration: none;
        }
        /*正常的未被访问过的链接*/
        a:link {
            text-decoration: none;
        }
        /*已经访问过的链接*/
        a:visited {
            text-decoration: none;
        }
        /*鼠标划过(停留)的链接*/
        a:hover {
            text-decoration: none;

        }
        /* 正在点击的链接*/
        a:active {
            text-decoration: none;
        }
        ul, li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .banner{
            background: url(images/index.jpg) no-repeat center;
            margin-bottom: 10px;
        }
        h4{
            padding: 0;
            margin: 0;
        }
        .search{
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 10px;

        }
        table{
            width:100%;
            border-collapse:collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
            border-spacing:0; /*设置行与单元格边框的间距。当表格边框独立（即border-collapse:separate;）此属性才起作用*/
        }

        table td{
            margin: 0;
            padding: 0;
            word-break: break-all; /*允许在字内换行,即单词可分*/
            word-wrap:break-word;/*允许长单词或URL地址换行*/
        }
        .slogan{
            color: white;
            font-size: 50px;
            margin: 30px 0;
        }
        .search-line{
            padding: 0 15px;
            border: 1px solid transparent;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width:450px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.3);
            margin-bottom:10px;
        }
        .search-button{
            margin: 0;
            padding: 0;
            height:40px;
            width:80px;
            outline: none;
            border: 0;
            background-color: #3399ea;
            color: white;
            transition: all .5s cubic-bezier(.645,.045,.355,1);
        }
        .search-button:hover{
            background-color: rgba(0, 131, 234, 0.68);
        }
        input:focus{
            outline: none;
            border-color: #3399ea;
        }
        input::-webkit-input-placeholder{
            color: rgba(255, 255, 255, 0.8);
        }
        #billboard{
            padding: 10px;
            color: white;
            background-color: rgba(0, 0, 0, 0.3);
        }
        #billboard a{
            color: white;
        }
        .billboard-hd{
            padding: 10px 10px 0;
            margin: 0 10px;
            border-bottom: 1px solid gray;
        }
        .billboard-hd h2{
            font-size: 20px;
        }
        #billboard tbody{
            padding: 0 10px;
        }

        #billboard td{
            padding: 7px 0;

        }
        .line{
            border: 1px solid grey;
            height:1px;
            margin: 0 10px;
        }
        .order{
            font-size: 14px;
            text-align: center;
        }
        .title{
            font-size: 16px;;
        }
        .line{
            border: 0.5px solid #c7c7c7;
            height:0.5px;
        }
        .hot-comment-content{
            display: flex;
            flex-direction:row;
            flex-wrap: wrap;

        }
        .hot-comment-card{
            display: flex;
            flex-direction: column;
            align-items: center;
            width:150px;
            margin: 15px;
        }
        .card-hd{
            margin-top: 5px;
        }
        .card-hd:hover{
            color: #3399ea;
        }
        .cover{
            width:150px;
            height:auto;
        }
        .star-list{
            padding-left: 5px;
        }
        .star-list li{
            float: left;
        }
        .star{
            width:13px;
            height:13px;
            margin: 0 1px;
        }
        .score{
            padding-top: 3px;
            margin: 0 6px;
            color: #e09015;
        }
        .hot-comment-title{
            margin: 10px;
        }
        .announcement-title{
            margin: 10px;

        }

    </style>
</head>
<body>
<header id="navigator">
    <div class="nav-left">
        <span class="nav_name">海大优选</span>
        <span class="nav_list"><a href="#" >首页</a></span>
        <span class="nav_list"><a href="#">课程</a></span>
    </div>
    <div class="nav-right">
        <div id="drop-name">
            <img src="images/duck.jpg" alt="">
            <span>杨欧牟</span>
        </div>
        <div>
            <ul id="drop-list">
                <div class="line"></div>
                <li><a href="#">个人中心</a></li>
                <div class="line"></div>
                <li><a href="">退出</a></li>
            </ul>
        </div>
    </div>

</header>
<section class="banner">

<div class="container">
<div class="row ">
    <div class="col-md-8 search">
        <form action="">
            <input type="text" class="search-line" placeholder="请输入您想找的课程">
            <button class="search-button" type="submit">搜索</button>
        </form>
    </div>
    <div class="col-md-4">
        <div id="billboard">
            <div class="billboard-hd">
                <h2>课程好评榜</h2>
            </div>
            <div class="billboard-bd">
                <table>
                    <tbody>
                    <tr>
                        <td class="order">1</td>
                        <td class="title"><a href="#">计算机网络</a></td>
                    </tr>
                    <tr>
                        <td class="order">2</td>
                        <td class="title"><a href="#">编译原理</a></td>
                    </tr>
                    <tr>
                        <td class="order">4</td>
                        <td class="title"><a href="#">计算机网络</a></td>
                    </tr>
                    <tr>
                        <td class="order">4</td>
                        <td class="title"><a href="#">线性代数</a></td>
                    </tr>
                    <tr>
                        <td class="order">5</td>
                        <td class="title"><a href="#">高等数学</a></td>
                    </tr> <tr>
                        <td class="order">6</td>
                        <td class="title"><a href="#">大学生职业规划</a></td>
                    </tr>
                    <tr>
                        <td class="order">7</td>
                        <td class="title"><a href="#">高级口语</a></td>
                    </tr>
                    <tr>
                        <td class="order">8</td>
                        <td class="title"><a href="#">软件测试与分析</a></td>
                    </tr>
                    <tr>
                        <td class="order">9</td>
                        <td class="title"><a href="#">软件工程</a></td>
                    </tr>
                    <tr>
                        <td class="order">10</td>
                        <td class="title"><a href="#">数据结构</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
</div>
</section>
<section>
    <div class="container">

        <div class="row">
            <div class="col-md-8">
                <div class="hot-comment">
                    <h4 class="hot-comment-title">正在热评</h4>
                    <div class="line"></div>
                </div>
                    <div class="hot-comment-content">
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">3</li>
                            </ul>
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">4</li>
                            </ul>
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">5</li>
                            </ul>
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">6</li>
                            </ul>
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">7</li>
                            </ul>
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">8</li>
                            </ul>
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score"> </li>
                            </ul> 
                        </div>
                        <div class="hot-comment-card">
                            <a href="#"><img src="images/temp.jpg" alt="" class="cover"></a>
                            <a href="" class="card-hd">软件工程</a>
                            <ul class="star-list">
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li><img src="images/评星0.png" alt="" class="star"></li>
                                <li class="score">0</li>
                            </ul>
                        </div>
                    </div>
            </div>
            <div class="col-md-4">
                <div class="announcement">
                    <h4 class="announcement-title">通知</h4>

                </div>
            </div>
        </div>
    </div>
</section>
<footer>
   <div class="line"></div>
    <div class="copyright">
        Copyright © 2019 大碗宽面 All Rights Reserved
    </div>
</footer>

<script src="js/tools.js"></script>
</body>
</html>